<nav class="navbar sticky-top navbar-toggleable-md navbar-light bg-faded">
  <div class="container">
    <a class="navbar-brand" [routerLink]="['/home']" ><i class="fa fa-home"></i>ANGULAR2 SAMPLE</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar2"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="exCollapsingNavbar">
      <ul class="navbar-nav mr-auto mt-2 mt-md-0">
        <li class="nav-item" [routerLinkActive]="['active']"><a class="nav-link" [routerLink]="['/posts']"  >{{'posts'}}</a></li>
        <li class="nav-item" [routerLinkActive]="['active']"><a class="nav-link" [routerLink]="['/posts', 'new']"  >{{'new-post'}}</a></li>
        <li class="nav-item" [routerLinkActive]="['active']"><a class="nav-link" [routerLink]="['/about']"  >{{'about'}}</a></li>
      </ul>

      <ul class="nav navbar-nav my-2 my-lg-0">
        <li class="nav-item" [appShowAuthed]="false"><a class="btn btn-outline-success" [routerLink]="['/signin']" >{{'signin'}}</a></li>
        <li class="nav-item" [appShowAuthed]="false"><a class="nav-link" [routerLink]="['/signup']"  >{{'signup'}}</a>
        </li>
        <li class="nav-item" [appShowAuthed]="true"><button type="button" class="btn btn-outline-danger" (click)="logout()">{{'logout'}}</button>
        </li>
      </ul>
      <!-- /.navbar-collapse -->
    </div>
  </div>
  <!-- /.container-fluid -->
</nav>
